import React from 'react'
import { Link } from 'umi'
import { useSelector } from 'umi'
import { useEffect } from 'react'
import { useDispatch } from 'umi'
import { Button, Dropdown, Menu } from 'antd'

function Header() {
  const dispatch = useDispatch()
  const { currentUser } = useSelector(({ global }) => global)
  useEffect(_ => {
    dispatch({ type: "global/fetchCurrent" })
  }, [])
  const UserName = _ => <Dropdown overlay={<Menu>
    <Menu.Item onClick={_ => {
      dispatch({ type: "global/logout" })
    }}>
      退出登录
    </Menu.Item>
  </Menu>}>
    <Button type="text">{currentUser.Name}</Button>
  </Dropdown>
  return (
    <div style={{
      paddingRight: 16
    }}>
      {currentUser.Id ? <UserName /> : <Button>
        <Link to='/login'>登录</Link>
      </Button>}
    </div>
  )
}

export default Header
